<template>
    <div class="container">
        <!-- 黑白名单管理 -->
        <div class="blackManageMain">
            <el-form
                :inline="true"
                :model="formData"
                class="demo-form-inline formData_form_inline"
                size="small"
            >
                <el-form-item label="名单类型">
                    <el-select v-model="formData.blackType" clearable placeholder="请选择名单类型">
                        <el-option
                            v-for="item in selectList"
                            :label="item.label"
                            :value="item.code"
                            :key="item.code"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="联系号码">
                    <el-input v-model="formData.phone1" placeholder="请输入联系号码"></el-input>
                </el-form-item>
                <!--<el-form-item label="联系号码2">-->
                    <!--<el-input v-model="formData.phone2" placeholder="请输入联系号码2"></el-input>-->
                <!--</el-form-item>-->
                <!--<el-form-item label="联系号码3">-->
                    <!--<el-input v-model="formData.phone3" placeholder="请输入联系号码3"></el-input>-->
                <!--</el-form-item>-->
                <el-button
                    type="primary"
                    size="small"
                    icon="el-icon-search"
                    @click="hanlesearch"
                    :loading="searchLoading"
                >查 询</el-button>
                <el-button
                    type="primary"
                    size="small"
                    icon="el-icon-refresh-right"
                    @click="handleReset"
                    :loading="resetLoading"
                >重 置</el-button>
                <!--<el-button type="primary" size="small" icon="el-icon-download" @click="clickImport" >导 入</el-button>-->
            </el-form>
            <div style="margin: 10px 0 16px;">
                <el-button
                    type="primary"
                    size="small"
                    icon="el-icon-circle-plus-outline"
                    @click="hanlePush"
                >新增</el-button>
            </div>
            <el-table :data="tableData" width="100%" stripe border class="heard-bg">
                <el-table-column label="名单类型" prop="blackType">
                    <template slot-scope="scope">
                        <div>{{scope.row.blackType | filterBlacktype(selectList)}}</div>
                    </template>
                </el-table-column>
                <!--<el-table-column label="联系方式">-->
                <!--<template slot-scope="scope">-->
                <!--<span v-if="scope.row.linkType === '1'">手机号码</span>-->
                <!--</template>-->
                <!--</el-table-column>-->
                <el-table-column label="联系号码1" prop="phone1"></el-table-column>
                <el-table-column label="联系号码2" prop="phone2"></el-table-column>
                <el-table-column label="联系号码3" prop="phone3"></el-table-column>
                <el-table-column label="控制类型">
                    <template slot-scope="scope">
                        <span v-if="scope.row.controlType === '1'">呼入</span>
                        <span v-else-if="scope.row.controlType === '2'">呼出</span>
                    </template>
                </el-table-column>
                <!--<el-table-column label="开始日期" prop="startDate"></el-table-column>-->
                <!--<el-table-column label="结束日期" prop="endDate"></el-table-column>-->
                <el-table-column label="联系人描述" prop="remark"></el-table-column>
                <el-table-column label="状态">
                    <template slot-scope="scope">
                        <span v-if="scope.row.state === '0'">无效</span>
                        <span v-else-if="scope.row.state === '1'">有效</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                            type="primary"
                            icon="el-icon-edit"
                            circle
                            title="编辑"
                            @click="handleEdit(scope.row)"
                        />
                        <el-button
                            type="danger"
                            icon="el-icon-delete"
                            circle
                            title="删除"
                            @click="handleDelete(scope.row)"
                        />
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="pagination">
                <Pagination
                    :hanleChangeCurrentPage="hanleChangeCurrentPage"
                    :handleChangeSize="handleChangeSize"
                    :currentPage="currentPage"
                    :pageSize="pageSize"
                    :total="total"
                />
            </div>
        </div>
        <el-dialog
            v-drag
            :close-on-click-modal="false"
            :visible.sync="Show"
            append-to-body
            center
            width="500px"
        >
            <div slot="title">{{EditTitle}}</div>
            <el-form
                :model="Edit"
                class="menu-setting"
                label-position="right"
                ref="Edit"
                label-width="140px"
                :rules="formRules"
                size="small"
            >
                <el-form-item label="名单类型" prop="blackType">
                    <el-select v-model="Edit.blackType" clearable placeholder="请选择名单类型">
                        <el-option
                            v-for="item in selectList"
                            :label="item.label"
                            :value="item.code"
                            :key="item.code"
                        />
                    </el-select>
                </el-form-item>
                <!--<el-form-item label="联系方式" prop="linkType">-->
                <!--<el-select v-model="Edit.linkType" clearable placeholder="请选择联系方式" >-->
                <!--<el-option label="手机号码" value="1"/>-->
                <!--</el-select>-->
                <!--</el-form-item>-->
                <el-form-item label="联系号码1" prop="phone1">
                    <el-input v-model="Edit.phone1" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="联系号码2" prop="phone2">
                    <el-input v-model="Edit.phone2" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="联系号码3" prop="phone3">
                    <el-input v-model="Edit.phone3" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="控制类型" prop="controlType">
                    <el-select v-model="Edit.controlType" clearable placeholder="请选择控制类型">
                        <el-option label="呼入" value="1" />
                        <el-option label="呼出" value="2" />
                    </el-select>
                </el-form-item>
                <el-form-item label="开始日期" prop="startDate">
                    <el-date-picker
                        v-model="Edit.startDate"
                        type="date"
                        placeholder="请选择开始日期"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        :picker-options="startOptions"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label="结束日期" prop="endDate">
                    <el-date-picker
                        v-model="Edit.endDate"
                        type="date"
                        placeholder="请选择结束日期"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        :picker-options="endtOptions"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label="联系人描述" prop="remark">
                    <el-input
                        type="textarea"
                        :autosize="{minRows:3,maxRows:4}"
                        v-model="Edit.remark"
                        placeholder="请输入"
                    />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button
                    size="small"
                    icon="el-icon-circle-close"
                    @click="Show = false"
                    class="cancelBtn"
                >取 消</el-button>
                <el-button
                    type="primary"
                    size="small"
                    @click="submitEdit"
                    class="submitBtn"
                    icon="el-icon-circle-check"
                >确定</el-button>
            </div>
        </el-dialog>
        <el-dialog
            v-drag
            :close-on-click-modal="false"
            :visible.sync="ShowImport"
            append-to-body
            center
            width="500px"
            @close="cancelClick"
        >
            <div slot="title">黑白名单导入</div>
            <input type="file" ref="input" id="fileupload" @input="upload" />
            <!-- <el-button type="text" @click="downloadFile">点击此处下载模板</el-button> -->
            <a @click="downloadFile" class="downloadClass">点击下载黑白名单表模板</a>
            <div slot="footer" class="dialog-footer">
                <el-button
                    size="small"
                    icon="el-icon-circle-close"
                    @click="cancelClick"
                    class="cancelBtn"
                >取 消</el-button>
                <el-button
                    type="primary"
                    size="small"
                    @click="handleImport"
                    class="submitBtn"
                    icon="el-icon-circle-check"
                >确定</el-button>
            </div>
        </el-dialog>
        <div class="fontcolor" align="left">
            <table align="left">
                <tr>
                    <td align="left">
                        黑名单：添加后客户可以进入IVR，但是不能转人工
                    </td>
                </tr>
                <tr>
                    <td align="left">
                        红名单：客户优先进线
                    </td>
                </tr>
            </table>
        </div>
    </div>
</template>

<script>
import moment from 'moment';
import Pagination from '@/components/Pagination/Pagination.vue';
import { RegConfig } from '@/utils/RegConfig';
import { getDictSelectList } from '@/utils/Common';
import request from '@/apis/request';

export default {
    name: 'blackAndWhite',
    components: {
        Pagination,
    },
    data() {
        return {
            selectList: [], // 名单类型
            formData: {
                phone1: '',
                phone2: '',
                phone3: '',
                blackType: '',
            },
            // 新增用户字段
            Edit: {
                blackType: '',
                controlType: '',
                phone1: '',
                phone2: '',
                phone3: '',
                remark: '',
                linkType: '',
                startDate: '', // 开始日期
                endDate: '', // 结束日期
            },
            EditTitle: '',
            Show: false,
            ShowImport: false,
            files: {},
            // 搜索loading
            searchLoading: false,
            // 重置loading
            resetLoading: false,
            formRules: {
                blackType: [
                    { required: true, message: '请选择名单类型', trigger: 'change' },
                ],
                controlType: [
                    { required: true, message: '请选择控制类型', trigger: 'change' },
                ],
                linkType: [
                    { required: true, message: '请选择联系方式', trigger: 'change' },
                ],
                phone1: [
                    { required: true, message: '请输入联系号码', trigger: 'blur' },
                    // { pattern: RegConfig.mobile, message: '请输入11位有效联系号码', trigger: 'blur' },
                ],
                // startDate: [
                //     { required: true, message: '请选择起始日期', trigger: 'blur' },
                // ],
                // endDate: [
                //     { required: true, message: '请选择结束日期', trigger: 'blur' },
                // ],
            },
            // 当前页码
            currentPage: 1,
            // 页码大小
            pageSize: 10,
            // 总数
            total: 0,
            // 表格内容
            tableData: [],
            // 日期限制
            startOptions: { // 开始日期选择 限制
                disabledDate: (time) => {
                    if (this.Edit.endDate) {
                        return time.getTime() > new Date(moment(this.Edit.endDate).format('YYYY-MM-DD HH:mm:ss')).getTime();
                    }
                },
            },
            endtOptions: { // 结束日期选择限制
                disabledDate: (time) => {
                    if (this.Edit.startDate) {
                        return time.getTime() < new Date(moment(this.Edit.startDate).format('YYYY-MM-DD HH:mm:ss')).getTime();
                    }
                },
            },
        };
    },
    filters: {
        filterBlacktype: (value, selectList) => {
            console.log(value, 'filters');
            let label = '';
            if (value) {
                selectList.some((item) => {
                    if (item.code === value) {
                        label = item.label;
                        return true;
                    }
                })
                return label;
            } else {
                return value;
            }
        }
    },
    async mounted() {
        this.getInitData(this.formData);
        this.selectList = await getDictSelectList('BLACK_TYPE', this);
        console.log('this.selectList', this.selectList);
    },
    methods: {
        // 获取用户表格数据
        getInitData(form) {
            let params = {
                pageNum: this.currentPage,
                pageSize: this.pageSize,
            };
            params = Object.assign({}, params, form);
            this.$post.blackAndWhiteMangage.searchByNamelist(params)
                .then((res) => {
                    console.log('res', res);
                    if (res.data.success) {
                        this.tableData = res.data.content.recordList;
                        this.total = res.data.content.recordCount;
                    }
                });
        },
        // 点击搜索
        hanlesearch() {
            this.currentPage = 1;
            this.pageSize = 10;
            this.getInitData(this.formData);
        },
        // 点击重置
        handleReset() {
            this.formData = {
                phone: '',
                blackType: '',
            };
            this.currentPage = 1;
            this.pageSize = 10;
            this.getInitData(this.formData);
        },
        upload() {
            this.files = this.$refs.input.files[0];
        },
        // 导入
        clickImport() {
            this.ShowImport = true;
        },
        // 导入点击确定按钮
        handleImport() {
            if (!this.files.name) {
                this.$message.warning('请选择需要导入的文件！');
                return;
            }
            const arr = ['xls', 'xlsx', 'csv', 'xltx', 'xml'];
            if (arr.indexOf(this.files.name.split('.')[1]) > -1) {
                const data = new FormData();
                data.append('file', this.files);
                this.$post.Custlabel.batchImport(data)
                    .then((res) => {
                        if (res.data.success) {
                            this.$message.success('导入成功！');
                            const obj = document.getElementById('fileupload');
                            obj.value = '';
                            this.getInitData(this.formData);
                            this.ShowImport = false;
                        } else {
                            this.$message.error(res.data.msg);
                        }
                    });
            } else {
                this.$message.warning('只能导入excel文件！');
            }
        },
        downloadFile() {
            const url = '/iccsrv/custlabel/download';
            request({
                url,
                method: 'get',
                responseType: 'blob',
                params: 'custLabelTemplate.xlsx',
            }).then((res) => {
                // console.log(res, '相应报文')
                const blobUrl = window.URL.createObjectURL(new Blob([res.data]));
                const a = document.createElement('a');
                a.style.display = 'none';
                a.download = 'custLabelTemplate.xlsx';
                a.href = blobUrl;
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
            });
        },
        // 取消
        cancelClick() {
            const obj = document.getElementById('fileupload');
            obj.value = '';
            this.ShowImport = false;
        },
        // 点击新增
        hanlePush() {
            this.EditTitle = '添加名单';
            this.Edit = {};
            this.Show = true;
            // 解决一进来就进行表单验证问题
            if (this.$refs.Edit) {
                this.$refs.Edit.resetFields();
            } else {
                this.$nextTick(() => {
                    // this.$refs.Edit.resetFields();
                });
            }
        },
        // 点击编辑
        handleEdit(row) {
            this.EditTitle = '修改名单';
            this.Edit = JSON.parse(JSON.stringify(row));
            this.Show = true;
            if (this.$refs.Edit) {
                this.$refs.Edit.resetFields();
            } else {
                this.$nextTick(() => {
                    // this.$refs.Edit.resetFields();
                });
            }
        },
        // 单个删除用户
        handleDelete(row) {
            this.$confirm('确认删除该名单？', '提示', { customClass: 'warning', type: 'warning' })
                .then(() => {
                    this.$post.blackAndWhiteMangage.deleteNamelist({ id: row.id })
                        .then((res) => {
                            if (res.data.success) {
                                this.$message.success('删除成功！');
                                if (this.tableData.length === 1) {
                                    this.currentPage = this.currentPage - 1;
                                }
                                this.getInitData(this.formData);
                            } else {
                                this.$message.error(res.data.msg);
                            }
                        });
                })
                .catch(() => {
                });
        },
        // 新增用户点击确定按钮
        submitEdit() {
            if (this.Edit.id) {
                // 编辑
                this.$refs.Edit.validate((valid) => {
                    if (valid) {
                        this.$post.blackAndWhiteMangage.updateNamelist(this.Edit)
                            .then((res) => {
                                if (res.data.success) {
                                    this.$message.success('修改成功！');
                                    this.getInitData(this.formData);
                                    this.Show = false;
                                } else {
                                    this.$message.error(res.data.msg);
                                }
                            });
                    } else {
                        this.$message.warning('请完成表单填写！');
                    }
                });
            } else {
                // 添加
                this.$refs.Edit.validate((valid) => {
                    if (valid) {
                        this.$post.blackAndWhiteMangage.addNamelist(this.Edit)
                            .then((res) => {
                                if (res.data.success) {
                                    this.$message.success('添加成功！');
                                    this.getInitData(this.formData);
                                    this.Show = false;
                                } else {
                                    this.$message.error(res.data.msg);
                                }
                            });
                    } else {
                        this.$message.warning('请完成表单填写！');
                    }
                });
            }
        },
        // 页码切换方法
        hanleChangeCurrentPage(val) {
            this.currentPage = val;
            this.getInitData();
        },
        // 切换分页大小方法
        handleChangeSize(val) {
            this.pageSize = val;
            this.getInitData();
        },
    },
};
</script>

<style  lang="scss">
.downloadClass {
    margin-left: 18%;
    color: #409eff;
}
.fontcolor {
    padding-left: 5px;
    color: red;
}
.container {
    width: 100%;
    height: 100%;
    .blackManageMain {
        width: 100%;
        background: #fff;
        margin-bottom: 15px;
        // border-radius:5px;
        padding: 20px;
        box-sizing: border-box;
        text-align: left;

        .tableTitle {
            width: 100%;
            height: 48px;
            border: 1px solid #eee;
            border-bottom: none;
            line-height: 48px;
            margin-top: 20px;
            color: #666;
        }
        .pagination {
            margin-top: 20px;
            text-align: right;
        }
    }
}
</style>
